<template>
	<view class="si_liao_box" :style="{height: windowHeight + 'px'}">
		<!-- 标题 -->
		<view class="title_box pv_20 text_center flex_column_between">
			<view class="title1">
				<text class="title vertical_text mn fs_36_i mainColor fw_bold">ᠪᠣᠷᠳᠤᠭᠠᠨ᠎ᠤ ᠨᠠᠢᠷᠠᠯᠭ᠎ᠠ</text>
			</view>
		</view>
		
		<view class="content_box">
			<!-- 添加配方 -->
			<view class="add_pei_fang w_full h_100 lh_100 text_center bgc_fff border_radius_10 pv_10 border_box">
				<text class="vertical_text mn fs_40 h_full lh_40 ws_normal mainColor" @click="goToAddPeiLiao()">ᠨᠠᠢᠷᠠᠯᠭ᠎ᠠ ᠨᠡᠮᠡᠬᠦ</text>
			</view>
			
			<!-- 饲料记录 -->
			<view class="si_liao_list_box">
				<view class="si_liao_list">

					<!-- 饲料 item -->
					<view class="si_liao_item bgc_fff border_radius_10 flex_row_between">
						<view class="img_box">
							<image src="../../static/img/LOGO.png" mode=""></image>
						</view>
						
						<view class="content_box p_10 border_box flex_row_between bgc_fff">
							<!-- 饲料名称 -->
							<view class="si_liao_name w_20_p">
								<text class="h_140 text_center ws_normal vertical_text mn fs_38">ᠨᠠᠢᠷᠠᠯᠭ᠎ᠠ᠎ᠶᠢᠨ ᠨᠡᠷᠡᠢᠳᠦᠯ</text>
							</view>
							
							<!-- 饲料信息 -->
							<view class="si_liao_info w_60_p flex_row_around">
								<text class="h_120 text_center ws_normal vertical_text mn color_ccc fs_36">45 ᠦᠬᠡᠷ ᠬᠡᠷᠡᠭᠯᠡᠪᠡ</text>
								<text class="h_120 text_center ws_normal vertical_text mn color_ccc fs_36">24 ᠡᠳᠦᠷ ᠭᠦᠶᠴᠡᠨ᠎ᠡ</text>
							</view>
						</view>
					</view>
				
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import getSystemInfo from '../../mixins/basic.js'
	import NET from '@/utils/request.js'
	import API from '@/config/api.js'
	
	export default {
		mixins: [getSystemInfo],
		data() {
			return {
				
			}
		},
		onLoad(options) {
			// 获取设备高度
			this.getSystemHeight()

		},
		methods: {
			// 前往添加饲料页面
			goToAddPeiLiao() {
				uni.navigateTo({
					url: `/subcontract/breed-archive/add-si-liao`,
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	
	.si_liao_box {
		width: 100%;
		// border: 1px solid #f00;
		box-sizing: border-box;
		position: relative;
		
		// 标题
		.title_box {
			width: 80rpx;
			height: 100%;
			box-sizing: border-box;
			position: relative;
			float: left;
			background-color: #f7f7f7;
		}
		
		.content_box {
			width: calc(100% - 80rpx);
			height: 99%;
			margin-left: 80rpx;
			background-color: #f7f7f7;
			// border: 1px solid #f00;
			padding: 0 10rpx;
			box-sizing: border-box;
			
			// 添加配方按钮
			.add_pei_fang {}
			
			// 饲料列表
			.si_liao_list_box {
				width: 100%;
				height: calc(100% - 120rpx);
				// border: 1px solid #f00;
				margin-top: 10rpx;
				
				.si_liao_list {
					width: 100%;
					padding: 0 0rpx;
					box-sizing: border-box;

					// 饲料item
					.si_liao_item {
						width: 100%;
						height: 160rpx;
						margin-top: 20rpx;
						background-color: #fff;

						.img_box {
							width: 160rpx;
							height: 160rpx;
							padding: 10rpx;
							box-sizing: border-box;
							// border: 1px solid #f00;
							image { width: 100%; height: 100%; border-radius: 8rpx; }
						}
						
						.content_box {
							width: calc(100% - 160rpx);
							height: 100%;
							margin-left: 0;
							padding: 10rpx;
							box-sizing: border-box;
							background-color: #fff;
						}
					}
				}
				
				
			}
		}
	}
</style>

<style lang="less">
	@import url('~@/static/css/plugin.css');
</style>
